<script setup>
  import { getCityListApi } from '@/api/home'
  import { useLocationStore } from '@/stores'
  import { getLocation } from '@/utils/getLocation'
  import { onLoad } from '@dcloudio/uni-app'
  import { computed, ref } from 'vue'
  const letterId = ref(null)
  const locationStore = useLocationStore()

  const emit = defineEmits(['click'])

  onLoad(() => {
    getCityList()
  })

  const hotCityList = ref([])
  const allCityMap = ref({})
  // 获取城市列表(热门和全城市)
  async function getCityList() {
    const resp = await getCityListApi()
    hotCityList.value = resp.hotCityList
    allCityMap.value = resp.allCityMap
  }
  // 右侧字母列表
  const letterList = computed(() => {
    return Object.keys(allCityMap.value)
  })
  const props = defineProps({
    // 城市名
    city: {
      type: String,
      default: '北京'
    }
  })
  // 滚动到指定元素位置
  const scrollTo = (l) => {
    letterId.value = l
  }

  // 当选择城市时
  const onSelectCity = (item) => {
    if (item.id !== locationStore.location.id) {
      // 更新位置
      locationStore.setLocation(item)
      // 通知首页城市变了
      uni.$emit('cityChange')
    }
    // 返回首页
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
  }
</script>

<template>
  <!-- 顶部导航栏 -->
  <bit-nav-bar title="选择城市" />
  <!-- 右侧字母列表 -->
  <view class="aside-letter">
    <view
      class="letter-item"
      v-for="l in letterList"
      :key="l"
      @click="scrollTo(l)"
      :class="{ active: letterId === l }"
    >
      {{ l }}
    </view>
  </view>
  <view class="city-select">
    <!-- 城市 -->
    <scroll-view
      scroll-y
      class="city-select-list"
      :scroll-into-view="letterId"
      :scroll-with-animation="true"
      :show-scrollbar="false"
    >
      <!-- 当前城市 -->
      <view
        class="current"
        id="History"
      >
        <view class="title">当前定位</view>
        <view class="current-city">
          <view class="current-city-left">
            <bit-icon>&#xe83d;</bit-icon>
            <text class="currnet-city-left-name"> {{ props.city }} </text>
          </view>
          <text
            class="current-city-right"
            @click="getLocation"
            >重新定位</text
          >
        </view>
      </view>
      <view class="divider"></view>
      <!-- 热门城市 -->
      <view
        class="hot"
        id="Hot"
      >
        <view class="title">热门城市</view>
        <view class="hot-city-list">
          <view
            class="hot-city-list-item"
            v-for="item in hotCityList"
            :key="item.id"
            :class="{ active: item.id === locationStore.location.id }"
            @click="onSelectCity(item)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
      <!-- 城市列表 -->
      <view class="all">
        <view class="list">
          <view
            class="list-box"
            v-for="(value, key) in allCityMap"
            :key="key"
            :id="key"
          >
            <view class="title">{{ key }}</view>
            <view
              class="list-box-item b-b"
              v-for="item in value"
              :key="item.id"
              @click="onSelectCity(item)"
              >{{ item.name }}</view
            >
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  @import '@/styles/mixins.scss';
  // 顶部导航栏

  // 右侧边栏字母表
  .aside-letter {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    z-index: 2;
    right: 10rpx;
    top: 458rpx;
    width: 60rpx;
    .letter-item {
      margin: 10rpx 0;
      color: #6f6f6f;
      font-size: 22rpx;
      &.active {
        color: var(--text-active-color);
        font-weight: 600;
      }
    }
  }
  .city-select {
    // 城市列表
    .city-select-list {
      position: fixed;
      left: 0;
      top: 176rpx;
      @include bottom-safeArea;
      box-sizing: border-box;
      background-color: #fff;
      .title {
        margin: 10rpx 0;
        padding: 20rpx 0;
        font-size: var(--font-size-sm);
        color: var(--text-color-middle);
      }
      .current {
        padding: 30rpx 30rpx 0;
        &-city {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10rpx 0;
          &-left {
            &-name {
              font-size: var(--font-size-md);
              color: var(--text-color-dark);
              font-weight: 600;
            }
          }
          &-right {
            font-size: var(--font-size-sm);
            color: var(--text-active-color);
          }
        }
      }
      .divider {
        width: 100vw;
        height: 10rpx;
        background-color: var(--main-bg-color);
      }
      .hot {
        padding: 0 30rpx;
        &-city-list {
          display: flex;
          flex-wrap: wrap;
          &-item {
            width: 192rpx;
            height: 74rpx;
            margin-bottom: 20rpx;
            line-height: 74rpx;
            text-align: center;
            background-color: var(--main-bg-color);
            border-radius: 16rpx;
            font-size: var(--font-size-sm);
            color: var(--text-color-dark);
            &:nth-child(3n - 1) {
              margin: 0 20rpx;
            }
            &.active {
              background-color: rgba(15, 161, 254, 0.2);
              color: var(--text-active-color);
            }
          }
        }
      }
      .all {
        padding: 0 30rpx;
        .list {
          box-sizing: border-box;
          padding-right: 20rpx;
          &-box {
            &-item {
              box-sizing: border-box;
              padding: 20rpx 38rpx;
              font-size: var(--font-size-md);
              color: var(--text-color-dark);
            }
          }
        }
      }
    }
  }
</style>
